import {
  Button, Form, Input, Modal, Space
} from 'antd';
import { useRequest } from 'ahooks';

interface SelectDetail {
  isModalShow: boolean,
  setIsModalShow: (isModalShow: boolean) => void,
  url: string,
  questionnaireUuid: string,
  handleCreate: () => Promise<null>
}

const TAIL_LAYOUT = {
  wrapperCol: { offset: 16, span: 16 },
};

export default ({
  isModalShow, setIsModalShow, url, questionnaireUuid, handleCreate
}: SelectDetail) => {
  const { run, loading } = useRequest((option) => ({
    url,
    method: 'POST',
    data: {
      questionnaireUuid,
      name: option
    },
  }), {
    manual: true,
    onSuccess: () => {
      handleCreate();
      setIsModalShow(false);
    },
    onError: () => {
    },
  });

  const handleSubmit = (value: {option: string}) => {
    run(value.option);
  };

  return (

    <Modal
      title="选项添加"
      visible={isModalShow}
      footer={null}
      closable={false}
      destroyOnClose
    >
      <Form onFinish={handleSubmit}>
        <Form.Item
          name="option"
          label="名称"
          rules={[{ required: true, message: '请输入选项名称' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <Space>
            <Button type="primary" htmlType="submit" loading={loading}>
              保存
            </Button>
            <Button
              htmlType="button"
              onClick={() => {
                setIsModalShow(false);
              }}
            >
              取消
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Modal>
  );
};
